import { markRaw, Ref } from 'vue'
import type { Component } from 'vue'

/**
 * 设置根元素的字体大小，以实现页面的自适应布局。
 * @param bs - 基准字体大小，默认值为 16
 * @param width - 设计稿宽度，默认值为 335
 * 根据当前屏幕宽度与设计稿宽度的比例，动态调整根元素的字体大小。
 * 最大缩放比例限制为 2 倍。
 */
const setRootFontSize = function(bs = 16, width = 335) {
  const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  const baseSize = bs // 基准字体大小
  const scale = screenWidth / width // 设计稿宽度（通常为 375px）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' // 限制最大缩放比例
}

/**
 * 通用的分页加载函数，负责生成分页数据的工厂函数
 * 当用户滚动触底时，系统会调用该函数生成新数据
 * 若需要空数据状态，返回空数组dataGenerator: () => []
 * @param options 配置选项
 * @param dataList 数据列表的ref引用
 * @param page 当前页码的ref引用
 * @param loading 加载状态的ref引用
 * @param noMore 是否没有更多数据的ref引用
 * @param dataGenerator 数据生成函数
 * @param maxPage 最大页码
 * @param delay 延迟时间(ms)
 */
const commonLoadMore = ({
  dataList,
  page,
  loading,
  noMore,
  dataGenerator,
  maxPage = 3,
  delay = 1000
}: {
  dataList: Ref<any[]>
  page: Ref<number>
  loading: Ref<boolean>
  noMore: Ref<boolean>
  dataGenerator: (pageNum: number, currentLength: number) => any[]
  maxPage?: number
  delay?: number
}) => {
  if (loading.value || noMore.value) return

  loading.value = true

  setTimeout(() => {
    if (page.value < maxPage) {
      const newData = dataGenerator(page.value, dataList.value.length)
      dataList.value = [...dataList.value, ...newData]
      page.value += 1
    } else {
      noMore.value = true
    }

    loading.value = false
  }, delay)
}

// 使用图标组件
const getIconComponent = (iconsArr: Record<string, Component>, iconName: string): Component | null => {
  return markRaw(iconsArr[iconName] || null)
}

export { setRootFontSize, commonLoadMore, getIconComponent }